/**
 * @name common.scss
 * @description 公共样式文件
 * @author fengjin
 * @date 2021-07-20 18:17:02
 */

@import "reset.css";

body {
  box-sizing: border-box;
  width: 100%;
  min-width: 1200px;
  height: 100%;
  font: 12px/1.5 Microsoft YaHei, Microsoft YaHei-Regular, sans-serif;
  color: $h2-text-color;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* {
  box-sizing: inherit;
}
a {
  color: $color-primary;
  text-decoration: none;
}

/**
 * @description 文字颜色为主题色
 * @author fengjin
 * @date 2021-07-30 15:17:07
 * @example 当文字需要默认显示主题色时使用 primary-text
 * @example 当鼠标划过文字时需要显示主题色时使用 primary-text-hover
 */
.primary-text,
.primary-text-hover:hover {
  color: $color-primary;
}
// 警告颜色
.warning-text,
.warning-text-hover:hover {
  color: $color-warning;
}
// 成功颜色
.success-text { color: #28c452; }
// 错误颜色
.error-text { color: $color-error; }
// 加粗字体
.strong-text { font-weight: 700; }

/**
 * @description 模块标题 - 左边有 4px 宽的边线
 * @author fengjin
 * @date 2021-07-30 17:52:46
 */
.section-title {
  margin-bottom: 1em;
  padding-left: 10px;
  line-height: 16px;
  border-left: 4px solid $color-primary;
  font-size: 14px;
  font-weight: 700;
  color: $h2-text-color;
}

// 标题组
h1, h2, h3 {
  margin: 0;
  padding: 0;
  line-height: 1;
}
h1,
.h1 {
  margin-bottom: 10px;
  line-height: 1;
  font-size: 18px;
  font-weight: 700;
  color: $h1-text-color;
}
h2,
.h2 {
  color: $h2-text-color;
}
h3,
.h3 {
  color: $h3-text-color;
}

/**
 * @description 文字颜色为主题色
 * @author fengjin
 * @date 2021-07-30 15:17:07
 * @example 当文字需要默认显示主题色时使用 primary-text
 * @example 当鼠标划过文字时需要显示主题色时使用 primary-text-hover
 */
.primary-text,
.primary-text-hover:hover {
  color: $color-primary !important;
}

.strong-text { font-weight: 700; }

/**
 * @description 模块标题 - 左边有 4px 宽的边线
 * @author fengjin
 * @date 2021-07-30 17:52:46
 */
.section-title {
  margin-bottom: 1em;
  padding-left: 10px;
  line-height: 16px;
  border-left: 4px solid $color-primary;
  font-size: 14px;
  font-weight: 700;
  color: $h2-text-color;
}

.has-spacing { // padding: 20px 24px;
  padding: $page-spacing-y $page-spacing-x;
}

.has-spacing-x { // 左右内边距 24px
  padding-right: $page-spacing-x;
  padding-left: $page-spacing-x;
}

.has-spacing-y {
  padding-top: $page-spacing-y;
  padding-bottom: $page-spacing-y;
}

// 超出范围省略号显示
.text-truncate {
  @include text-truncate();
}

.break-list {
  > .break-list-item {
    & + .break-list-item {
      margin-top: 0.5em;
    }
  }
}

.like-link {
  cursor: pointer;

  &:hover {
    color: $color-primary;
  }
}

.txt-center { text-align: center; }

.el-icon {
  margin-top: -3px;
  vertical-align: middle;

  svg {
    width: 1em;
    height: 1em;
  }
}

.button-group-primary {
  > button {
    background-color: $color-white;
    border-color: $border-color-base;

    &:hover,
    &:focus {
      background-color: $color-white;
      border-color: $color-primary;
      color: $color-primary;
    }

    &[active="true"] {
      z-index: 99;
      border-color: $color-primary;
      color: $color-primary;
    }
  }
}

// 异常页面
.exception-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  overflow: hidden;
  padding: $layout-spacing-y $layout-spacing-x;
}

// 应用平台
[data-platform="Android"],
[data-platform="0"],
[data-platform="IOS"],
[data-platform="1"],
[data-platform="微信小游戏"],
[data-platform="2"],
[data-platform="QQ小游戏"],
[data-platform="3"] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 24px;
  border: 1px solid $border-color-base;
  border-radius: $border-radius-small;

  & ~ * { margin-left: 10px; }
}
[data-platform="Android"], [data-platform="0"] { border-color: #5473e8; color: #5473e8; }
[data-platform="IOS"], [data-platform="1"] { border-color: #ff9f24; color: #ff9f24; }
[data-platform="微信小游戏"], [data-platform="2"] { border-color: #28c452; color: #28c452; }
[data-platform="QQ小游戏"], [data-platform="3"] { border-color: #35d3d4; color: #35d3d4; }

.platform-txt {
  width: auto;
  height: auto;
  border: none;
  border-radius: none;
}
.platform-txt[data-platform="Android"], .platform-txt[data-platform="0"] { color: #5473e8; }
.platform-txt[data-platform="IOS"], .platform-txt[data-platform="1"] { color: #ff9f24; }
.platform-txt[data-platform="微信小游戏"], .platform-txt[data-platform="2"] { color: #28c452; }
.platform-txt[data-platform="QQ小游戏"], .platform-txt[data-platform="3"] { color: #35d3d4; }
